<template>
  <div class="unitInfo-tableContainer">
    <div class="unitInfo-tableTitle">
      <h2>临安区公共机构能源消耗调查汇总表</h2>
      <span>
        (
        <el-date-picker v-model="yearText" type="year" value-format="yyyy" placeholder="选择年" style="width:100px;" @change="onSearch">
        </el-date-picker>年单位基本情况) 【
        <el-checkbox v-model="checked" @change="getDepartmentNames()">汇总至一级单位</el-checkbox>
        &nbsp;&nbsp;&nbsp;&nbsp;填报单位：
        <el-select v-model="searchKey" placeholder="所有单位" size='mini' @change="onSearch">
          <el-option v-for="item in departmentData" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </span>
      <p>【 说明：如勾选汇总至一级单位，则选择某个具体单位时，基础数据含下属2级单位数据，反之则不包含 】</p>
    </div>
    <div class="unitInfo-tableContent">
      <table width="100%" border="1" cellpadding="10">
        <tr>
          <td rowspan="12" align="center" valign="middle" width="80px;">
            <strong>从业<br/><br/>人员<br/><br/>公务<br/><br/>车辆<br/><br/>办公<br/><br/>建筑<br/><br/>情况</strong>
          </td>
          <td>年用能人数</td>
          <td>{{energyData.PeopleTotal}}</td>
          <td>年末车辆总数</td>
          <td>{{energyData.CarTotal}}</td>
        </tr>
        <tr>
          <td style="padding-left:15px;">其中：在编人数</td>
          <td>{{energyData.PeopleIn}}</td>
          <td style="padding-left:15px;">其中：汽油车数量</td>
          <td>{{energyData.CarGasoline}}</td>
        </tr>
        <tr>
          <td style="padding-left:58px;">非在编人数</td>
          <td>{{energyData.PeopleOut}}</td>
          <td style="padding-left:58px;">柴油车数量</td>
          <td>{{energyData.CarDiesel}}</td>
        </tr>
        <tr>
          <td>地上办公室建筑面积(m
            <sup>2</sup>)</td>
          <td>{{energyData.AreaUp}}</td>
          <td style="padding-left:58px;">新能源汽车数量</td>
          <td>{{energyData.CarNewEnergy}}</td>
        </tr>
        <tr>
          <td>地下建筑用途</td>
          <td>{{energyData.AreaUse}}</td>
          <td>是否有用电分项(户)计量</td>
          <td></td>
        </tr>
        <tr>
          <td>地下建筑面积(m
            <sup>2</sup>)</td>
          <td>{{energyData.AreaDown}}</td>
          <td>是否有用水分项(户)计量</td>
          <td></td>
        </tr>
        <tr>
          <td>绿地面积(m
            <sup>2</sup>)</td>
          <td>{{energyData.AreaGreen}}</td>
          <td>外窗类型</td>
          <td>{{energyData.OutsideType}}</td>
        </tr>
        <tr>
          <td>办公室数量</td>
          <td>{{energyData.OfficeNum}}</td>
          <td>窗框类型</td>
          <td>{{energyData.FrameWindowType}}</td>
        </tr>
        <tr>
          <td>总配电容量</td>
          <td>{{energyData.OfficeCapacitance}}</td>
          <td>玻璃类型</td>
          <td>{{energyData.GlassType}}</td>
        </tr>
        <tr>
          <td>电表总表号码</td>
          <td>{{energyData.OfficeElectNum}}</td>
          <td>是否利用太阳能(或空气能)</td>
          <td></td>
        </tr>
        <tr>
          <td>水表总表号码</td>
          <td>{{energyData.OfficeWaterNum}}</td>
          <td>有无食堂</td>
          <td></td>
        </tr>
        <tr>
          <td>物业管理方式</td>
          <td>{{energyData.OfficeManageWay}}
            <td>有无浴室</td>
            <td></td>
        </tr>
        <tr>
          <td rowspan="13" align="center" valign="middle">
            <strong>用能<br/><br/>设备<br/><br/>情况</strong>
          </td>
          <td align="center" valign="middle">设备类型</td>
          <td align="center" valign="middle">设备名称</td>
          <td align="center" valign="middle">台数</td>
          <td align="center" valign="middle">总功率(Kw)</td>
        </tr>
        <tr>
          <td rowspan="4" align="center" valign="middle">制冷(热)设备</td>
          <td valign="middle">办公空调</td>
          <td valign="middle">{{energyData.OfficeAirNum}}</td>
          <td valign="middle">{{energyData.OfficeAirPower}}</td>
        </tr>
        <tr>
          <td valign="middle">中央空调</td>
          <td valign="middle">{{energyData.CentralAirNum}}</td>
          <td valign="middle">{{energyData.CentralAirPower}}</td>
        </tr>
        <tr>
          <td valign="middle">冰箱</td>
          <td valign="middle">{{energyData.FridgeNum}}</td>
          <td valign="middle">{{energyData.FridgePower}}</td>
        </tr>
        <tr>
          <td valign="middle">锅炉</td>
          <td valign="middle">{{energyData.BoilerNum}}</td>
          <td valign="middle">{{energyData.BoilerPower}}</td>
        </tr>
        <tr>
          <td rowspan="8" align="center" valign="middle">办公室设备</td>
          <td valign="middle">电梯</td>
          <td valign="middle">{{energyData.ElevatorNum}}</td>
          <td valign="middle">{{energyData.ElevatorPower}}</td>
        </tr>
        <tr>
          <td valign="middle">电脑</td>
          <td valign="middle">{{energyData.ComputerNum}}</td>
          <td valign="middle">{{energyData.ComputerPower}}</td>
        </tr>
        <tr>
          <td valign="middle">打印机</td>
          <td valign="middle">{{energyData.PrinterNum}}</td>
          <td valign="middle">{{energyData.PrinterPower}}</td>
        </tr>
        <tr>
          <td valign="middle">复印机</td>
          <td valign="middle">{{energyData.PhotocopierNum}}</td>
          <td valign="middle">{{energyData.PhotocopierPower}}</td>
        </tr>
        <tr>
          <td valign="middle">传真机</td>
          <td valign="middle">{{energyData.FaxNum}}</td>
          <td valign="middle">{{energyData.FaxPower}}</td>
        </tr>
        <tr>
          <td valign="middle">交互机</td>
          <td valign="middle">{{energyData.MachineNum}}</td>
          <td valign="middle">{{energyData.MachinePower}}</td>
        </tr>
        <tr>
          <td valign="middle">服务器</td>
          <td valign="middle">{{energyData.ServerNum}}</td>
          <td valign="middle">{{energyData.ServerPower}}</td>
        </tr>
        <tr>
          <td valign="middle">稳压电源</td>
          <td valign="middle">{{energyData.SupplyPowerNum}}</td>
          <td valign="middle">{{energyData.SupplyPowerPower}}</td>
        </tr>
        <tr>
          <td colspan="4" valign="middle" align="right">合计总功率：</td>
          <td valign="middle">{{numTotal}}</td>
        </tr>
        <tr class="table-row">
          <td valign="middle" align="center">
            <strong>其他<br/><br/>情况</strong>
          </td>
          <td colspan="4" valign="middle"></td>
        </tr>
      </table>
      <div class="table-button">
        <el-button size="mini" @click="prints()">打印</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        yearText: new Date().getFullYear() + '',
        searchKey: '所有单位',
        checked: false,
        departmentData: ['所有单位'],
        numTotal: '0',
        energyData: {
          PeopleTotal: 0,
          PeopleIn: 0,
          PeopleOut: 0,
          AreaUp: 0,
          AreaDown: 0,
          AreaGreen: 0,
          AreaUse: "",
          CarTotal: 0,
          CarGasoline: 0,
          CarDiesel: 0,
          CarNewEnergy: 0,
          HasElectricity: 0,
          HasWater: 0,
          HasSolar: 0,
          HasFood: 0,
          HasBathroom: 0,
          OutsideType: "",
          FrameWindowType: "",
          GlassType: "",
          OfficeNum: 0,
          OfficeCapacitance: 0,
          OfficeElectNum: 0,
          OfficeWaterNum: 0,
          OfficeManageWay: "",
          OfficeAirNum: 0,
          OfficeAirPower: 0,
          CentralAirNum: 0,
          CentralAirPower: 0,
          FridgeNum: 0,
          FridgePower: 0,
          BoilerNum: 0,
          BoilerPower: 0,
          ElevatorNum: 0,
          ElevatorPower: 0,
          ComputerPower: 0,
          ComputerNum: 0,
          PrinterPower: 0,
          PrinterNum: 0,
          PhotocopierPower: 0,
          PhotocopierNum: 0,
          FaxPower: 0,
          FaxNum: 0,
          MachinePower: 0,
          MachineNum: 0,
          ServerPower: 0,
          ServerNum: 0,
          SupplyPowerPower: 0,
          SupplyPowerNum: 0
        }
      }
    },
    methods: {
      async getDetail() {
        const department = this.searchKey == '所有单位' ? '' : this.searchKey
        console.log(department)
        console.log(this.yearText)
        console.log(this.checked)
        const result = await this.$get("/api/DepartmentEnergy/statistcs", {
          year: this.yearText,
          departmentName: department,
          includeChild: this.checked
        })
        if (result) {
          this.energyData = result
          this.numTotal = (result.SupplyPowerPower * 1000 + result.ServerPower * 1000 + result.MachinePower * 1000 + result.FaxPower * 1000 +
            result.PhotocopierPower * 1000 + result.PrinterPower * 1000 + result.ComputerPower * 1000 + result.ElevatorPower * 1000 +
            result.BoilerPower * 1000 + result.FridgePower * 1000 + result.CentralAirPower * 1000 + result.OfficeAirPower * 1000) / 1000
        } else {
          this.energyData = {
            PeopleTotal: 0,
            PeopleIn: 0,
            PeopleOut: 0,
            AreaUp: 0,
            AreaDown: 0,
            AreaGreen: 0,
            AreaUse: "",
            CarTotal: 0,
            CarGasoline: 0,
            CarDiesel: 0,
            CarNewEnergy: 0,
            HasElectricity: 0,
            HasWater: 0,
            HasSolar: 0,
            HasFood: 0,
            HasBathroom: 0,
            OutsideType: "",
            FrameWindowType: "",
            GlassType: "",
            OfficeNum: 0,
            OfficeCapacitance: 0,
            OfficeElectNum: 0,
            OfficeWaterNum: 0,
            OfficeManageWay: "",
            OfficeAirNum: 0,
            OfficeAirPower: 0,
            CentralAirNum: 0,
            CentralAirPower: 0,
            FridgeNum: 0,
            FridgePower: 0,
            BoilerNum: 0,
            BoilerPower: 0,
            ElevatorNum: 0,
            ElevatorPower: 0,
            ComputerPower: 0,
            ComputerNum: 0,
            PrinterPower: 0,
            PrinterNum: 0,
            PhotocopierPower: 0,
            PhotocopierNum: 0,
            FaxPower: 0,
            FaxNum: 0,
            MachinePower: 0,
            MachineNum: 0,
            ServerPower: 0,
            ServerNum: 0,
            SupplyPowerPower: 0,
            SupplyPowerNum: 0
          }
        }
      },
      prints() {
        if (window.print != null) {
          window.print();
        }
        else {
          this.$message({
            showClose: true,
            message: '您没有安装打印机，请安装后继续！',
            type: 'error'
          })
        }
      },
      onSearch() {
        this.getDetail()
      },
      // 获取所有单位列表
      async getDepartmentNames() {
        this.departmentData = ['所有单位']
        var result
        if (this.checked) {
          result = await this.$get('/api/User/getParents')
        } else {
          result = await this.$get('/api/User/getDepartmentNames')
        }
        var obj = JSON.parse(localStorage.getItem('userInfo'))
        if (obj.role == '2') {
          this.searchKey = result[0]
          this.departmentData = result;
        } else {
          this.departmentData = this.departmentData.concat(result)
        }
        // this.departmentData = this.departmentData.concat(result)
        this.getDetail()
      }
      // 获取一级单位列表
    },
    created() {
      this.showHome.isShow = false;
      this.getDepartmentNames();
    }
  }

</script>
<style lang="scss" scoped>
  .unitInfo-tableContainer {
    width: 100%;
    padding: 20px 15px;
  }

  .unitInfo-tableTitle {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 25px;
    h2 {
      font-size: 16px;
      margin-bottom: 10px;
    }
    span {
      font-size: 16px;
      font-weight: bold;
    }
    p {
      font-size: 16px;
      margin-top: 5px;
      font-weight: bold;
    }
  }

  .unitInfo-tableInfo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 25px;
    color: #606266;
  }

  .unitInfo-tableContent {
    width: 100%;
    table {
      color: #606266;
      border: 1px solid #ebeef5;
      td {
        padding: 5px;
      }
      tr.table-row {
        height: 45px;
      }
    }
  }

  .table-footers {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    .tableFooter-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 25px;
      .tableFooter-col {
        flex: 1;
      }
    }
  }

  .table-button {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>